<template>
  <h1>表单组件</h1>
  <el-form style="width: 50%; margin: 0 auto;" label-width="80">
    <el-form-item label="用户名">
      <el-input placeholder="请输入用户名" v-model="data.name"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input placeholder="请输入密码" v-model="data.pwd" show-password></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group  v-model="data.sex">
        <el-radio-button label="男" value="男" ></el-radio-button>
        <el-radio-button label="女" value="女"></el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="所在地">
      <el-select placeholder="请选择所在地" v-model="data.local">
        <el-option label="上海" value="上海"></el-option>
        <el-option label="北京" value="北京"></el-option>
        <el-option label="广州" value="广州"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="管理员">
      <el-switch v-model="data.isAdmin"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="add">点我提交</el-button>
    </el-form-item>
  </el-form>

  <hr>
<!--  1.  -->
  <p v-if="r1"> 这是一个受v-if管理的</p>
  <p v-show="r2"> 这是一个受v-show管理的</p>
  <button @click="change">切换</button><br>
  <hr>
<!--  2.  -->
  <input type="text" style="width: 50%" v-model="img" placeholder="请输入图片的URL">
  <img :src="img">
  <hr>
<!--  3.  -->
  <ul>
    <li v-for="(i,index) in fruits">
      {{i}}
      <button @click="del(index)">删除</button>
    </li>
  </ul>
  <hr>
<!--  4.  -->
  <input type="text" placeholder="请输入用户名" v-model="user2.username"><br>
  <input type="text" placeholder="请输入密码" v-model="user2.password"><br>
  <input type="text" placeholder="请再次输入密码" v-model="user2.confirmPassword">
  <button @click="reg2">提交</button>
</template>

<script setup>
  import {ref} from "vue";

  const data=ref({
    name:"",
    pwd:"",
    sex:"男",
    local:"",
    isAdmin:false
  });
  const add=()=>{
    console.log(data.value);
  }

  //1.
  const r1=ref(false);
  const r2=ref(true);
  const change=()=>{
    r1.value=!r1.value;
    r2.value=!r2.value;
  }
  //2.
  const img=ref('');
  //3.
  const fruits=ref(["苹果", "香蕉", "橘子", "苹果", "香蕉", "橘子"]);
  const del=(index)=>{
    fruits.value.splice(index,1);
  }
  //4.
  const user2 = ref({
    username:'',
    password:'',
    confirmPassword:''
  });
  //定义注册的方法
  const reg2 = ()=>{
    if(user2.value.password !== user2.value.confirmPassword){
      alert("两次输入的密码不一致!");
    }else{
      alert("注册成功!");
    }
  }
</script>

<style scoped>

</style>
// 1. 创建一个按钮点击按钮可以切换p标签的显示状态,要求使用 v-if 控制第一个段落是否渲染,
//         用 v-show 控制第二个段落的可见性
// 2. 创建一个动态图片展示组件,包含一个输入框,当用户输入图片URL后,
//         下方的 <img> 元素将动态绑定并显示该图片
// 3. 定义一个包含至少5个商品名称的数组,利用 v-for 将其渲染为无序列表,并为每个商品添加删除功能
// 4. 设计一个表单,包括用户名、密码、确认密码字段,当用户点击提交按钮时,
//          验证两次输入的密码是否一致,并输出提示信息